<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <ul class="breadcrumb">
                <li>
                    <a href="/">Home</a>
                </li>
                <li>
                    <a href="/wwfw/gddj">运维服务/工单查询</a>
                </li>
                <li class="active">
                    工单查询
                </li>
            </ul>
            <!--显示工单表格，分页显示，每页20条记录-->
            <div class="panel-body">
                <div id="toolbar" class="btn-group">
                    <div class="btn-group" data-toggle="buttons" id="select_check"> <!-- data-toggle="buttons" -->
						<label class="btn btn-default" onclick="checkbox_showAll_click()">
                            <input type="checkbox" id="checkbox_showAll" name="checkbox_showAll" value="false" onclick="checkbox_showAll_click()"> 查看所有
                        </label>
                    </div>	
                    <!--button id="btn_export" type="button" class="btn btn-default" onclick="exportData()">
						<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>导出所有
					</button-->
                </div>
                <!--div class="pre-scrollable" div带滚动条 -->
                <div class="">
                    <!--table id="table" data-use-row-attr-func="true" data-reorderable-rows="true"-->
                    <table id="tb_list">
                        <!--上面的是可以拖动行排序的二个选项-->
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="modal-isok" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">
                    添加工单：
                </h4>
            </div>
            <div class="modal-body">
                <!--模式窗体正文-->
                <div class="row clearfix">
                    <form class="form-horizontal" role="form" method="post" action="/qd/zhjscgjl">

                        <div class="col-md-6 column">
                            <div class="form-group">
                                <label for="riqi" class="col-sm-3 control-label">日期时间</label>
                                <div class="col-sm-9">
                                    <input type="text" name="riqi" class="form-control" id="riqi" readonly="readonly" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="skjc" class="col-sm-3 control-label">上课节次</label>
                                <div class="col-sm-9">
                                    <select id="skjc" class="form-control" placeholder="选择上课节次"></select>
                                    <!--input type="text" class="form-control" id="jc" name="jc" /-->
                                    <!--input type="number" class="form-control" id="jc" name="jc" step="1" min="0" data-bv-greaterthan-inclusive="false" data-bv-greaterthan-message="The input must be greater than or equal to 1" max="16" data-bv-lessthan-inclusive="true" data-bv-lessthan-message="The input must be less than 16"/-->
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="jsmc" class="col-sm-3 control-label">教室名称</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="jsmc" name="jsmc" aria-describedby="helpJsmc"/>
                                    <span id="helpJsmc" class="help-block">不是教室故障，则不填写教室名称.</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="gzxx" class="col-sm-3 control-label">故障现像</label>
                                <div class="col-sm-9">
                                    <textarea type="" rows="4" class="form-control" id="gzxx" name="gzxx"> </textarea>
                                </div>
                            </div>
                            <!--div class="form-group">
                                <div class="col-sm-offset-1 col-sm-6">
                                    <div class="checkbox">
                                        <label><input type="checkbox" id="ghsb" name="ghsb" />更换了设备</label>
                                    </div>
                                </div>
                            </div-->
                        </div>

                        <div class="col-md-6 column">
                            <div class="form-group">
                                <label for="jjsj" class="col-sm-3 control-label">完成时间</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="jjsj" name="jjsj" aria-describedby="helpjjsj" readonly="readonly"/>
                                    <span id="helpjjsj" class="help-block">问题没有解决，则不要选择日期时间.</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="gzlx" class="col-sm-3 control-label">工单类型</label>
                                <div class="col-sm-9">
                                    <div class="controls">
                                        <select id="gzlx" class="form-control" placeholder="选择工单类型"></select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="gzsb" class="col-sm-3 control-label">故障设备</label>
                                <div class="col-sm-9">
                                    <div class="controls">
                                        <select id="gzsb" class="form-control" placeholder="选择设备类型"></select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="clfs" class="col-sm-3 control-label">处理方式</label>
                                <div class="col-sm-9">
                                    <div class="controls">
                                        <select id="clfs" class="form-control" placeholder="选择故障处理方式"></select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="clnr" class="col-sm-3 control-label">处理内容</label>
                                <div class="col-sm-9">
                                    <textarea type="" rows="4" class="form-control" id="clnr" name="clnr"> </textarea>
                                </div>
                            </div>

                        </div>
                        <div class="col-md-12 column">
                            <!--重置表单的隐藏元素-->
                            <input type="reset" name="button" id="btn_reset" value="重置" style="display:none" />
                            <button type="submit" id="btn-save" class="btn btn-info btn-lg btn-block">保存</button>
                        </div>
                    </form>

                </div>
                <!--模式窗体正文结束-->
            </div>
            <div class="modal-footer">
                <div id="textinfo" class="col-md-9 column text-left text-danger">
                    <strong></strong>
                </div>
                <div class="col-md-3 column">
                    <button type="submit" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>

    </div>

</div>



<script>
    $riqi = $("#riqi");
    $skjc = $("#skjc");
    $jsmc = $("#jsmc");
    $gzxx = $("#gzxx");
    $gzsb = $("#gzsb");
    $gzlx = $("#gzlx");
    $clfs = $("#clfs");
    $clnr = $("#clnr");
    $jjsj = $("#jjsj");
	
	var $checkbox_showAll = $("#checkbox_showAll"),
	$showAll;
	//$("#checkbox_zhikanziji");	//$("input:radio[name=yy]").change(function () {

    $btn_save = $("#btn-save");
    $tb_list = $("#tb_list");

    //刷新表格
    function refresh_tb_list() {
        $tb_list.bootstrapTable('refresh', {
            url: "/api/v1/fygd"	//取得分页工单
        });
    };

    //初始化表格
    function init_tb_list() {
        $tb_list.bootstrapTable({
            method: 'get', //请求方式（*）
            toolbar: '#toolbar', //工具按钮用哪个容器
            clickToSelect: true, //是否启用点击选中行
            singleSelect: true,
            striped: true, //是否显示行间隔色
            showRefresh: true, //是否显示刷新按钮
            uniqueId: "id", //每一行的唯一标识，一般为主键列
            showToggle: true, //是否显示详细视图和列表视图的切换按钮
			cardView: false, //是否显示详细视图
			silent: true,  //刷新事件必须设置
			cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
			//queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10,25,50,100],        //可供选择的每页的行数（*）
            detailView: false, //是否显示父子表
            sortable: true, //是否启用排序
            sortOrder: "asc", //排序方式
			//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
            //设置为limit可以获取limit, offset, search, sort, order  
            queryParamsType : "undefined",   
            queryParams: function queryParams(params) {   //设置查询参数  
              var param = {    
                  pageNumber: params.pageNumber,    
                  pageSize: params.pageSize,
				  showAll:$checkbox_showAll.prop('checked'),	
				  //可以传递自定义的参数啊，如查看所有的状态chakansuoyou:true	
              };    
              return param;                   
            },
            columns: [{
                checkbox: true
            }, {
                field: 'riqi',
                title: '日期',
                align: 'center',
                valign: 'middle',
            }, {
                field: 'jc',
                title: '节次',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'jsmc',
                title: '教室名称',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'gzxx',
                title: '故障现像',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'clfs',
                title: '处理方式',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'clnr',
                title: '处理内容',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'jjsj',
                title: '完成时间',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'gzlx',
                title: '故障类型',
                align: 'center',
                valign: 'middle'
            }, {
				field: 'gzsb',
                title: '故障设备',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'jsr',
                title: '经手人',
                align: 'center',
                valign: 'middle'
            }],
            //data: [{}],
			formatLoadingMessage: function () {
				return "请稍等，正在加载中...";
			},
			formatNoMatches: function () {  //没有匹配的结果
				return '无符合条件的记录';
			},
			onLoadError: function (data) {
				$('#reportTable').bootstrapTable('removeAll');
			},
            onClickRow: function(row, $element) {
                //curRow = row;
                //alert("点击了行了！fjsb_id:" + row.fjsb_id);
				//window.location.href = "/qStock/qProInfo/" + row.id;	//编辑行
            },
			onDbClickRow:function(row, $element) {
                //curRow = row;
                //alert("点击了行了！fjsb_id:" + row.fjsb_id);
				//window.location.href = "/qStock/qProInfo/" + row.id;	//编辑行
            },
        });
    };

    //初始化设备类型的选择框
    function initSelect_gzsb() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: '/api/v1/sblxs',
            data: {
                id: "0"
            },
            success: function(res) {
                    //console.log("返回数据：" + res); //返回的是JSON数据
                    $gzsb.empty(); //清空选择框 
                    $.each(res, function(i, val) {
                        //console.log("sb_id" + res[i].sb_id + ";" + "name:" + res[i].name);
                        $gzsb.append("<option value='" + res[i].sb_id + "'>" + res[i].name + "</option>");
                        $.each(val, function(k, v) {});
                    });
                } //success		
        }); //$.ajax
    };
    //初始化故障类型的选择框
    function initSelect_gzlx() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: '/api/v1/gzlx',
            data: {
                id: "0"
            },
            success: function(res) {
                    //console.log("返回数据：" + res); //返回的是JSON数据
                    $gzlx.empty(); //清空选择框 
                    $.each(res, function(i, val) {
                        //console.log("sb_id" + res[i].sb_id + ";" + "name:" + res[i].name);
                        $gzlx.append("<option value='" + res[i].id + "'>" + res[i].name + "</option>");
                        $.each(val, function(k, v) {});
                    });
                } //success		
        }); //$.ajax
    };
    //初始化上课节次的选择框
    function initSelect_skjc() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: '/api/v1/skjc',
            data: {
                id: "0"
            },
            success: function(res) {
                    //console.log("返回数据：" + res); //返回的是JSON数据
                    $skjc.empty(); //清空选择框 
                    $.each(res, function(i, val) {
                        $skjc.append("<option value='" + res[i].id + "'>" + res[i].value + "</option>");
                        $.each(val, function(k, v) {});
                    });
                } //success		
        }); //$.ajax
    };
    //初始化故障处理方式的选择框
    function initSelect_clfs() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: '/api/v1/gzclfs',
            data: {
                id: "0"
            },
            success: function(res) {
                    //console.log("返回数据：" + res); //返回的是JSON数据
                    $clfs.empty(); //清空选择框 
                    $.each(res, function(i, val) {
                        $clfs.append("<option value='" + res[i].id + "'>" + res[i].value + "</option>");
                        $.each(val, function(k, v) {});
                    });
                } //success		
        }); //$.ajax
    };

    //ajax提交
    function save() {
        $datas = { //id | riqi| jc | jsmc | gzxx | clnr | jjsj | gzlx_id | gzlx | gzsb_id | gzsb   | jsr_id | jsr  |
            riqi: $riqi.val(),
            jc: $skjc.val(),
            jsmc: $jsmc.val(),
            gzxx: $gzxx.val(),
            gzsb_id: $gzsb.val(),
            gzlx_id: $gzlx.val(),
            clfs_id: $clfs.val(),
            clnr: $clnr.val(),
            jjsj: $jjsj.val(),
        };
        console.log("riqi:" + $datas.riqi + "，jc:" + $datas.jc + "，jsmc:" + $datas.jsmc + "，gzxx:" + $datas.gzxx +
            "，gzlx_id:" + $datas.gzlx_id + "，gzsb_id:" + $datas.gzsb_id + ",clfs_id:" + $datas.clfs_id +
            "，clnr:" + $datas.clnr + "，jjsj:" + $datas.jjsj);

        if ($datas.jc == "") {
            alert("null");
        };

        $.ajax({
            type: "Post",
            dataType: "json",
            url: '/api/v1/gd',
            data: $datas,
            success: function(res) {
                    //console.log("返回数据：" + res);
                    if (res == null) {
                        //console.log("返回数据是空的：" + res); //返回的是JSON数据
                        $("#textinfo").removeClass("text-danger").addClass("text-success");
                        $("#textinfo").html("<strong>增加" + "工单记录成功！点击关闭退出！</strong>");
                        $("input[type=reset]").trigger("click"); //重置表单元素，清空表单内容
                        $("#riqi").val(now()); //初始化riqi框内容
                        $("form").bootstrapValidator('resetForm'); //重置表单的校验
                        refresh_tb_list(); //刷新表格内容
                    } else {
                        $("#textinfo").removeClass("text-success").addClass("text-danger");
                        $("#textinfo").html("<strong>增加失败！请重试或退出！</strong>");
                    }
                }, //success
            error:function(res){
                //出现错误！
                console.log("ajax出错！");
                $("form").bootstrapValidator('resetForm'); //重置表单的校验
                $("#textinfo").removeClass("text-success").addClass("text-danger");
                $("#textinfo").html("<strong>增加失败！请重试或退出！</strong>");
            }		
        }); //$.ajax
    };

    $btn_save.click(function() { //用这种方式绑定按钮事件也能执行,添加点击事件onclick="save()"
        //alert("hdhd");
        //save();
    });
	
	function checkbox_showAll_click(){
		//alert("点了查看所有用户的按钮，刷新表格");
		refresh_tb_list();
	};
    //初始化
    $(function() {
        //模式窗体的隐藏事件
        $('#modal-isok').on('hidden.bs.modal', function(e) {
            refresh_tb_list();
            //重载页面window.location.reload();
        });

        //验证插件
        $('form').bootstrapValidator({　　　　　　　　
            message: 'This value is not valid',
            　feedbackIcons: {　　　　　　　　
                valid: 'glyphicon glyphicon-ok',
                　　　　　　　　invalid: 'glyphicon glyphicon-remove',
                　　　　　　　　validating: 'glyphicon glyphicon-refresh'　　　　　　　　
            },
            fields: {
                riqi: {
                    message: '日期格式验证失败',
                    validators: {
                        notEmpty: {
                            message: '日期不能为空'
                        }
                    }
                },
                jc: {
                    validators: {
                        notEmpty: {
                            message: '节次不能为空'
                        }
                    }
                },
                jsmc: {
                    validators: {
                        /*notEmpty: {
                            message: '教室名称不能为空'
                        },
                        stringLength: {
                            min: 4,
                            max: 6,
                            message: '教室长度在4-6之间'
                        },*/
                        remote: {
                            type: 'POST',
                            url: '/api/v1/fjValidator',
                            message: 'The fj is not available',
                            //delay: 1000
                        },
                    }
                },
                gzxx: {
                    validators: {
                        notEmpty: {
                            message: '故障现像不能为空'
                        }
                    }
                },
                clnr: {
                    validators: {
                        notEmpty: {
                            message: '请输入处理内容'
                        }
                    }
                }
            }
        });

        $('form').on('success.form.bv', function(e) { //form表单点击提交之后
            // Prevent form submission
            e.preventDefault();
            // Get the form instance
            var $form = $(e.target);
            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');
            // Use Ajax to submit form data 提交至form标签中的action，result自定义
            save();
        });
		
        init_tb_list();
        refresh_tb_list(); //刷新表格内容
        initSelect_gzsb(); //初始化设备类型选择框
        initSelect_gzlx(); //初始化故障类型选择框
        initSelect_skjc();//初始化上课节次选择框
        initSelect_clfs();//初始化故障处理方式选择框

        $("#riqi").val(now()); //初始化riqi框内容
        $('#riqi').datetimepicker({ //初始化日期选择框，绑定日期时间选择器到riqi上
            format: 'yyyy-mm-dd hh:ii',
            language: "zh-CN",
            todayBtn: true,
            todayHighlight: true,
            autoclose: true
        });

        $('#jjsj').datetimepicker({ //初始化日期选择框，绑定日期时间选择器到riqi上
            format: 'yyyy-mm-dd hh:ii',
            language: "zh-CN",
            todayBtn: true,
            todayHighlight: true,
            autoclose: true
        });
    });

    function now() {
        var mdate = new Date();
        ss = mdate.getFullYear() + "-" + (mdate.getMonth() + 1) + "-" + mdate.getDate() + " " + mdate.getHours() + ":" + mdate.getMinutes();
        return ss;
    };
	
	//导出数据
	function exportData(){
		$tb_list.bootstrapTable('destroy').bootstrapTable({
                exportDataType: "all"
		});
	};
</script>